<template>
	<view>
		<template v-if="list.length>0">
			<!-- 导航栏 -->
			<uni-nav-bar left-icon="left" :rightText="isNavBar?'完成':'编辑'" title="购物车" fixed="true" status-bar="true"
				@clickLeft="clickLeft" @clickRight="isNavBar=!isNavBar" />
			<UniCard>
				<!-- 单个商品 -->
				<view class="shop-cart">
					<view class="item-out" v-for="(item,index) in list" :key="item.id">
						<label @click="checkItem(index)">
							<radio color="red" style="transform:scale(0.7)" :checked="item.checked">
							</radio>
						</label>
						<view class="img">
							<image class="img" :src='item.imgUrl' mode='aspectFit' />
						</view>
						<view class="right">
							<view class="text">
								{{item.name}}
							</view>
							<text class="size-color" @click="clickSize(id)">
								<text>{{item.color}}</text>，<text>{{item.size}}</text><text
									class="inconfont icon-xiajiantou-copy"></text>
							</text>
							<view class="inventory">
								仅剩{{item.inventory}}件
							</view>
							<view class="money-btn">
								<view class="money">
									<text>￥</text><text>{{item.price}}</text>
								</view>
								<uni-number-box @change="changeNum($event,index,item)" :value="item.num" :min="1" />
							</view>
						</view>
					</view>
					<uni-popup ref="popup" type="bottom">
						<view class="popup">
							<view class="size-pop">
								<view class="img">
									<image style="width: 200rpx;height: 200rpx;"
										src="https://img11.360buyimg.com/n7/jfs/t1/208356/10/16172/143005/63f26557F9a72a503/de84f94e67cfe0ca.jpg"
										mode='aspectFit' />
								</view>
								<view class="right">
									<view class="money">
										<text>￥</text><text>333</text>
									</view>
									<view class="inventory">
										剩余<text style="color: red;font-size: 12px;">3</text>件
									</view>
									<view class="size">
										已选择 如图；43
									</view>
								</view>
							</view>
							<LineBorder></LineBorder>
							<view class="color">
								<view class="">
									颜色
								</view>
								<view class="">
								</view>
							</view>
							<LineBorder></LineBorder>
							<view class="size" style="padding: 0 20rpx;">
								<view>
									尺码
								</view>
								<ButtonCom :datas='btnList'></ButtonCom>
							</view>
							<LineBorder></LineBorder>
							<view class="ok-btn">
								确定
							</view>
						</view>
					</uni-popup>
				</view>
			</UniCard>
			<!-- 底部 -->
			<view class="shop-foot">
				<label>
					<radio color="red" :checked="isCheckedAll" style="transform:scale(0.7)" @click="checkedAll">
						<text>全选</text>
					</radio>
				</label>
				<template v-if="!isNavBar">
					<view class="right">
						<view class="sum-out">
							<view class="">
								合计：￥{{totalCount.price}}
							</view>
							<view class="">
								不含运费
							</view>
						</view>
						<view class="sum-btn" @click="toSureOrder">
							结算({{totalCount.num}})
						</view>
					</view>
				</template>
				<template v-else>
					<button class="del-btn" @click="delGoodsFn">
						删除
					</button>
				</template>
			</view>
		</template>
		<!-- 无数据展示 -->
		<template v-else>
			<uni-nav-bar left-icon="left" title="购物车" fixed="true" status-bar="true" @clickLeft="clickLeft" />
			<view class="noData">
				<text>
					购物车空空如也啦
				</text>
			</view>
		</template>
		<Tabbar cureentPage='cart'></Tabbar>
	</view>
</template>

<script>
	import UniCard from '@/components/common/UniCard.vue';
	import ButtonCom from '@/components/details/ButtonCom.vue';
	import LineBorder from '@/components/common/LineBorder.vue';
	import ChooseColorBtn from '@/components/cart/ChooseColorBtn.vue';
	import Tabbar from '@/components/common/Tabbar.vue';
	import {
		mapState,
		mapActions,
		mapGetters,
		mapMutations
	} from 'vuex'
	import http from '@/common/api/reqeust.js';


	export default {
		data() {
			return {
				isNavBar: false,
				id: 0,

				btnList: [{
					name: 12,
					disabled: true
				}, {
					name: 34,
					disabled: false
				}, {
					name: 56,
					disabled: true
				}],

				chooseColorBtn: [{
					img: '../../static/1.jpg',
					txt: '红色'
				}, {
					img: '../../static/1.jpg',
					txt: '红色2'
				}, {
					img: '../../static/1.jpg',
					txt: '红色22'
				}, ]
			}
		},

		components: {
			UniCard,
			ButtonCom,
			LineBorder,
			ChooseColorBtn,
			Tabbar
		},
		onShow() {
			//获取购物车数据 
			this.getData()
		},
		methods: {
			getData() {
				http.request({
					url: '/api/selectCart',
					method: 'post',
					data: {
						phone: this.userInfo.phone
					}
				}).then(res => {
					this.initCart(res.results)
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				})
			},
			clickLeft() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			...mapActions(['checkedAll']),
			...mapMutations(['checkItem', 'initCart', 'initOrder']),
			// 点击尺码
			clickSize() {
				this.$refs.popup.open('bottom')
			},
			// 点击数量按钮
			changeNum(value, index, item) {
				if (value == item.num) return;
				http.request({
					url: '/api/updateCartNum',
					method: 'post',
					data: {
						phone: this.userInfo.phone,
						goodsId: item.goodsId,
						num: value
					}
				}).then(res => {
					if (res.success) {
						this.list[index].num = value
					}
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				})
			},
			// 删除商品
			delGoodsFn() {
				if (this.selectedList.length) {
					http.request({
						url: '/api/delCart',
						method: 'post',
						data: {
							goods_id: this.selectedList,
						}
					}).then(res => {
						if (res.success) {
							this.$store.commit('delGoods')
							this.$store.commit('unCheckAll')
							uni.showToast({
								title: res.msg
							})
						}
					})
				}
				uni.showToast({
					title: '请选择商品删除',
					icon: 'none'
				})
			},
			// 点击结算
			toSureOrder() {
				if (this.selectedList.length == 0) {
					return uni.showToast({
						title: '请选择至少一件商品',
						icon: 'none'
					})
				}
				// 筛选出选中的数据
				const newList = []
				this.list.forEach(v => {
					this.selectedList.filter(i => {
						if (v.id == i) {
							newList.push(v)
						}
					})
				})
				http.request({
					url: '/api/addOrder',
					method: 'post',
					data: {
						phone: this.userInfo.phone,
						goodsArr: JSON.stringify(newList),
					}
				}).then(res => {
					if (res.success) {
						this.initOrder(res.data[0].order_id)
						uni.navigateTo({
							url: `/pages/sureOrder/sureOrder?ids=${JSON.stringify(this.selectedList)}`,
						});
					}
				})

			}
		},
		computed: {
			...mapState({
				list: state => state.cart.list,
				selectedList: state => state.cart.selectedList,
				userInfo: state => state.user.userInfo
			}),
			...mapGetters(['isCheckedAll', 'totalCount'])
		}
	}
</script>

<style scoped lang="scss">
	$wid100: 100rpx;

	@mixin flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shop-foot {
		border-top: solid 2rpx #cacaca;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: $wid100;
		background-color: #fff;
		@include flex;
		z-index: 10;
		bottom: 120rpx;

		.right {
			@include flex;
		}

		.sum-btn {
			border-radius: 40rpx;
			background-color: red;
			color: #fff;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			margin: 0 $pd20;
			padding: 0 40rpx;
		}

		.del-btn {
			@extend .sum-btn
		}
	}

	.noData {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff
	}


	.shop-cart {
		.item-out {
			display: flex;
			align-items: flex-start;

			.img {
				width: 200rpx;
				height: 200rpx;
				margin-right: $pd20;
			}

			.right {

				.size-color,
				.text,
				.inventory {
					margin-bottom: $pd20;
				}

				.size-color {
					background-color: #f7f8fa;
					border-radius: 20rpx;
					color: #aaabad;
				}

				.inventory {
					font-size: $uni-font-size-sm;
					margin-top: $pd20;
				}

				.money-btn {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.money {

						text:nth-of-type(2) {
							font-weight: bold;
						}

						text:nth-of-type(1) {
							font-size: $uni-font-size-sm;
							vertical-align: middle;
						}

						color: red;
					}
				}
			}
		}

		.size-pop,
		.color {
			padding: 0 $pd20;
		}

		.size-pop {
			display: flex;
			align-items: flex-end;
			margin-bottom: $pd20;

			.img {
				width: 200rpx;
				height: 200rpx;
				margin-right: $pd20;
			}

			.right {
				.money {
					color: red;

					text:nth-of-type(2) {
						font-weight: bold;
					}

					text:nth-of-type(1) {
						font-size: $uni-font-size-sm;
						vertical-align: middle;
					}
				}
			}
		}

		.color,
		.size {
			view:nth-of-type(1) {
				margin: $pd20 0;
			}
		}

		.ok-btn {
			background-color: red;
			color: #fff;
			width: 80%;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			border-radius: $border-commom;
			margin: 0 auto;
			margin-top: $pd20;
		}

		.popup {
			background-color: white;
		}
	}
</style>
